.demo21 {
  div {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80px;
    height: 80px;
    opacity: 0.3;
    background: #344966;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1, 1);
    animation: demo21 1s linear infinite;
    animation-play-state: paused;

    &:nth-child(1) {
      animation-delay: 0s;
    }

    &:nth-child(2) {
      animation-delay: -0.2s;
    }

    &:nth-child(3) {
      animation-delay: -0.4s;
    }
  }

  @keyframes demo21 {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0, 0);
    }

    50% {
      opacity: 0.8;
    }

    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1, 1);
    }
  }

  &.active {
    div {
      animation-play-state: running;
    }
  }
}

.demo22 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;

  div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    opacity: 0.3;
    background: #344966;
    animation: demo22 2s ease-in-out infinite;
    animation-play-state: paused;

    &:nth-child(1) {
      animation-delay: -1s;
    }
  }

  @keyframes demo22 {
    0% {
      width: 0;
      height: 0;
    }

    50% {
      width: 80px;
      height: 80px;
    }

    100% {
      width: 0;
      height: 0;
    }
  }

  &.active {
    div {
      animation-play-state: running;
    }
  }
}

.demo23 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;

  div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    opacity: 1;
    border: 3px solid #344966;
    box-sizing: border-box;
    animation: demo23 1s linear infinite;
    animation-play-state: paused;
  }

  @keyframes demo23 {
    0% {
      opacity: 1;
      width: 0;
      height: 0;
    }

    100% {
      opacity: 0;
      width: 80px;
      height: 80px;
    }

  }

  &.active {
    div {
      animation-play-state: running;
    }
  }
}

.demo24 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;

  div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    opacity: 1;
    border: 3px solid #344966;
    box-sizing: border-box;
    animation: demo24 1s linear infinite;
    animation-play-state: paused;

    &:nth-child(1) {
      animation-delay: -0s;
    }

    &:nth-child(2) {
      animation-delay: -0.2s;
    }

    &:nth-child(3) {
      animation-delay: -0.4s;
    }
  }

  @keyframes demo24 {
    0% {
      opacity: 1;
      width: 0;
      height: 0;
    }

    100% {
      opacity: 0;
      width: 80px;
      height: 80px;
    }

  }

  &.active {
    div {
      animation-play-state: running;
    }
  }
}

.demo25 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  div {
    position: absolute;
    width: 100%;
    height: 20px;
    left: 0;
    top: 40px;

    &::before {
      content: "";
      position: absolute;
      opacity: 1;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #344966;
      left: 0;
      top: 0;
      animation: demo25 1.4s linear infinite;
      animation-play-state: paused;
    }

    &:nth-child(1) {
      transform: rotate(0deg);

      &::before {
        animation-delay: -0s;
      }
    }

    &:nth-child(2) {
      transform: rotate(45deg);

      &::before {
        animation-delay: -0.2s;
      }
    }

    &:nth-child(3) {
      transform: rotate(90deg);

      &::before {
        animation-delay: -0.4s;
      }
    }

    &:nth-child(4) {
      transform: rotate(135deg);

      &::before {
        animation-delay: -0.6s;
      }
    }

    &:nth-child(5) {
      transform: rotate(180deg);

      &::before {
        animation-delay: -0.8s;
      }
    }

    &:nth-child(6) {
      transform: rotate(225deg);

      &::before {
        animation-delay: -1.0s;
      }
    }

    &:nth-child(7) {
      transform: rotate(270deg);

      &::before {
        animation-delay: -1.2s;
      }
    }

    &:nth-child(8) {
      transform: rotate(315deg);

      &::before {
        animation-delay: -1.4s;
      }
    }
  }

  @keyframes demo25 {
    0% {
      opacity: 1;
      width: 20px;
      height: 20px;
    }

    20% {
      opacity: 1;
    }

    80% {
      opacity: 0;
      width: 0;
      height: 0;
    }

    100% {
      opacity: 1;
      width: 20px;
      height: 20px;
    }
  }

  &.active {
    div {
      &::before {
        animation-play-state: running;
      }
    }
  }
}

.demo26 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  div {
    position: absolute;
    width: 100%;
    height: 20px;
    left: 0;
    top: 40px;

    &::before {
      content: "";
      position: absolute;
      opacity: 1;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #344966;
      left: 0;
      top: 0;
      animation: demo26 1.4s linear infinite;
      animation-play-state: paused;
    }

    &:nth-child(1) {
      transform: rotate(0deg);

      &::before {
        animation-delay: -1.4s;
      }
    }

    &:nth-child(2) {
      transform: rotate(45deg);

      &::before {
        animation-delay: -1.2s;
      }
    }

    &:nth-child(3) {
      transform: rotate(90deg);

      &::before {
        animation-delay: -1s;
      }
    }

    &:nth-child(4) {
      transform: rotate(135deg);

      &::before {
        animation-delay: -0.8s;
      }
    }

    &:nth-child(5) {
      transform: rotate(180deg);

      &::before {
        animation-delay: -0.6s;
      }
    }

    &:nth-child(6) {
      transform: rotate(225deg);

      &::before {
        animation-delay: -0.4s;
      }
    }

    &:nth-child(7) {
      transform: rotate(270deg);

      &::before {
        animation-delay: -0.2s;
      }
    }

    &:nth-child(8) {
      transform: rotate(315deg);

      &::before {
        animation-delay: -0s;
      }
    }
  }

  @keyframes demo26 {
    0% {
      opacity: 1;
      width: 20px;
      height: 20px;
    }

    20% {
      opacity: 1;
    }

    80% {
      opacity: 0;
      width: 0;
      height: 0;
    }

    100% {
      opacity: 1;
      width: 20px;
      height: 20px;
    }
  }

  &.active {
    div {
      &::before {
        animation-play-state: running;
      }
    }
  }
}

.demo27 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  div {
    position: absolute;
    width: 100%;
    height: 20px;
    left: 0;
    top: 40px;

    &::before {
      content: "";
      position: absolute;
      opacity: 1;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #344966;
      left: 0;
      top: 0;
      animation: demo27 1.4s linear infinite;
      animation-play-state: paused;
    }

    &:nth-child(1) {
      transform: rotate(0deg);

      &::before {
        animation-delay: -1.4s;
      }
    }

    &:nth-child(2) {
      transform: rotate(45deg);

      &::before {
        animation-delay: -1.2s;
      }
    }

    &:nth-child(3) {
      transform: rotate(90deg);

      &::before {
        animation-delay: -1s;
      }
    }

    &:nth-child(4) {
      transform: rotate(135deg);

      &::before {
        animation-delay: -0.8s;
      }
    }

    &:nth-child(5) {
      transform: rotate(180deg);

      &::before {
        animation-delay: -0.6s;
      }
    }

    &:nth-child(6) {
      transform: rotate(225deg);

      &::before {
        animation-delay: -0.4s;
      }
    }

    &:nth-child(7) {
      transform: rotate(270deg);

      &::before {
        animation-delay: -0.2s;
      }
    }

    &:nth-child(8) {
      transform: rotate(315deg);

      &::before {
        animation-delay: -0s;
      }
    }
  }

  @keyframes demo27 {
    0% {
      opacity: 1;
      width: 20px;
      height: 20px;
    }

    20% {
      opacity: 1;
    }

    80% {
      opacity: 0.3;
      width: 10px;
      height: 10px;
    }

    100% {
      opacity: 1;
      width: 20px;
      height: 20px;
    }
  }

  &.active {
    div {
      &::before {
        animation-play-state: running;
      }
    }
  }
}

.demo28 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: demo28_2 4.2s linear infinite;
  animation-play-state: paused;

  div {
    position: absolute;
    width: 100%;
    height: 20px;
    left: 0;
    top: 40px;

    &::before {
      content: "";
      position: absolute;
      opacity: 1;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #344966;
      left: 0;
      top: 0;
      animation: demo28_1 1.4s linear infinite;
      animation-play-state: paused;
    }

    &:nth-child(1) {
      transform: rotate(0deg);

      &::before {
        animation-delay: -1.4s;
      }
    }

    &:nth-child(2) {
      transform: rotate(45deg);

      &::before {
        animation-delay: -1.2s;
      }
    }

    &:nth-child(3) {
      transform: rotate(90deg);

      &::before {
        animation-delay: -1s;
      }
    }

    &:nth-child(4) {
      transform: rotate(135deg);

      &::before {
        animation-delay: -0.8s;
      }
    }

    &:nth-child(5) {
      transform: rotate(180deg);

      &::before {
        animation-delay: -0.6s;
      }
    }

    &:nth-child(6) {
      transform: rotate(225deg);

      &::before {
        animation-delay: -0.4s;
      }
    }

    &:nth-child(7) {
      transform: rotate(270deg);

      &::before {
        animation-delay: -0.2s;
      }
    }

    &:nth-child(8) {
      transform: rotate(315deg);

      &::before {
        animation-delay: -0s;
      }
    }
  }

  @keyframes demo28_1 {
    0% {
      opacity: 1;
      width: 20px;
      height: 20px;
    }

    20% {
      opacity: 1;
    }

    80% {
      opacity: 0.3;
      width: 10px;
      height: 10px;
    }

    100% {
      opacity: 1;
      width: 20px;
      height: 20px;
    }
  }

  @keyframes demo28_2 {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }

  &.active {
    animation-play-state: running;

    div {
      &::before {
        animation-play-state: running;
      }
    }
  }
}

.demo29 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  div {
    position: absolute;
    width: 100%;
    height: 20px;
    left: 0;
    top: 40px;

    &::before {
      content: "";
      position: absolute;
      opacity: 1;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #344966;
      left: 0;
      top: 0;
      animation: demo29 1.4s linear infinite;
      animation-play-state: paused;
    }

    &:nth-child(1) {
      transform: rotate(0deg);

      &::before {
        animation-delay: -0s;
      }
    }

    &:nth-child(2) {
      transform: rotate(45deg);

      &::before {
        animation-delay: -0.2s;
      }
    }

    &:nth-child(3) {
      transform: rotate(90deg);

      &::before {
        animation-delay: -0.4s;
      }
    }

    &:nth-child(4) {
      transform: rotate(135deg);

      &::before {
        animation-delay: -0.6s;
      }
    }

    &:nth-child(5) {
      transform: rotate(180deg);

      &::before {
        animation-delay: -0.8s;
      }
    }

    &:nth-child(6) {
      transform: rotate(225deg);

      &::before {
        animation-delay: -1.0s;
      }
    }

    &:nth-child(7) {
      transform: rotate(270deg);

      &::before {
        animation-delay: -1.2s;
      }
    }

    &:nth-child(8) {
      transform: rotate(315deg);

      &::before {
        animation-delay: -1.4s;
      }
    }
  }

  @keyframes demo29 {
    0% {
      opacity: 1;
      width: 20px;
      height: 20px;
    }

    20% {
      opacity: 1;
    }

    80% {
      opacity: 0.3;
      width: 10px;
      height: 10px;
    }

    100% {
      opacity: 1;
      width: 20px;
      height: 20px;
    }
  }

  &.active {
    div {
      &::before {
        animation-play-state: running;
      }
    }
  }
}

.demo30 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: demo30_2 4.2s linear infinite;
  animation-play-state: paused;

  div {
    position: absolute;
    width: 100%;
    height: 20px;
    left: 0;
    top: 40px;

    &::before {
      content: "";
      position: absolute;
      opacity: 1;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #344966;
      left: 0;
      top: 0;
      animation: demo30_1 1.4s linear infinite;
      animation-play-state: paused;
    }

    &:nth-child(1) {
      transform: rotate(0deg);

      &::before {
        animation-delay: -0s;
      }
    }

    &:nth-child(2) {
      transform: rotate(45deg);

      &::before {
        animation-delay: -0.2s;
      }
    }

    &:nth-child(3) {
      transform: rotate(90deg);

      &::before {
        animation-delay: -0.4s;
      }
    }

    &:nth-child(4) {
      transform: rotate(135deg);

      &::before {
        animation-delay: -0.6s;
      }
    }

    &:nth-child(5) {
      transform: rotate(180deg);

      &::before {
        animation-delay: -0.8s;
      }
    }

    &:nth-child(6) {
      transform: rotate(225deg);

      &::before {
        animation-delay: -1.0s;
      }
    }

    &:nth-child(7) {
      transform: rotate(270deg);

      &::before {
        animation-delay: -1.2s;
      }
    }

    &:nth-child(8) {
      transform: rotate(315deg);

      &::before {
        animation-delay: -1.4s;
      }
    }
  }

  @keyframes demo30_1 {
    0% {
      opacity: 1;
      width: 20px;
      height: 20px;
    }

    20% {
      opacity: 1;
    }

    80% {
      opacity: 0.3;
      width: 10px;
      height: 10px;
    }

    100% {
      opacity: 1;
      width: 20px;
      height: 20px;
    }
  }

  @keyframes demo30_2 {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  &.active {
    animation-play-state: running;

    div {
      &::before {
        animation-play-state: running;
      }
    }
  }
}